<template>
	<div class="ai-card">
		<!--收起按钮-->
		<div class="hide-btn"><wd-icon @click="hideCard" color="#fff" name="arrow-down" size="22px"></wd-icon></div>
		<!--对话组件-->
		<AiConversionCom :quesId="props.quesId" class="conversion-com"></AiConversionCom>
	</div>
</template>

<script setup>
	import AiConversionCom from '@/components/AiConversionCom.vue'
	import { ref, defineProps } from 'vue'
	const props = defineProps({
		quesId: Number
	})
	const emit = defineEmits(['hide'])
	const hideCard = (e)=>{
		emit('hide', e)
	}
</script>

<style>
	.ai-card{
		background-color: #aaaaaa88;
		border-top: 1px solid #aaa;
		backdrop-filter: blur(4px);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 320px;
		border-top-right-radius: 12px;
		border-top-left-radius: 12px;
		animation: bottom-in-ani 1 .6s;
	}
	.hide-btn{
		position: absolute;
		top: 0;
		height: 20px;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.conversion-com{
		position: absolute;
		left: 12px;
		right: 12px;
		top: 28px;
		bottom: 20px;
	}
</style>